<template>
  <div class="form-group">
    <label v-el:label :for="id" class="control-label" v-if="label">{{ label }}</label>
    <input v-el:input class="form-control"
           :type="type"
           :name="id"
           :id="id"
           :value="inputText"
           :placeholder="placeholder"
           @input="onInputText"
           @focus="onFocus"
           @blur="onBlur"/>
  </div>
</template>

<style>
</style>

<script>
  export default {
    props: {
      id: {
        type: String,
        require: true
      },
      type: {
        type: String,
        default: 'text'
      },
      label: String,
      placeholder: String,
      hint: String
    },
    data: function () {
      return {
        text: ''
      }
    },
    computed: {
      inputText: function () {
        return this.text
      }
    },
    ready: function () {
    },
    vuex: {
      actions: {
        onInputText: function (store, e) {
          let txt = e.target.value
          let self = this
          self.text = txt
          store.dispatch('ON_INPUT_TEXT', self, txt, e)
        },
        onFocus: function (store, e) {
          store.dispatch('ON_FOCUS', this, true, e)
        },
        onBlur: function (store, e) {
//          if (!e.target.value) {
//            let el = this.$el
//            $(el).removeClass('shake animated')
//              .addClass('shake animated')
//              .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
//                $(this).removeClass('shake animated')
//              })
//          }
          store.dispatch('ON_FOCUS', this, false, e)
        }
      }
    }
  }
</script>
